import React, { Component } from "react";
import {Form,Input,Select,Table,Divider,Button,Modal,DatePicker,Row,Col,Upload,Icon} from "antd";
import Content from "../../components/Content/Content";
import moment from "moment";

const { Item } = Form;
const { confirm } = Modal;
const { Option } = Select;
const { TextArea } = Input;
const InputGroup = Input.Group;

const dateFormat = "YYYY-MM-DD HH:mm:ss";

function handleChange(value) {
  console.log(`selected ${value}`);
}


//表格内容数据
const data = [];
for (let i = 0; i < 3; i++) {
  data.push({
    key: i,
    name: `AACC000${i}`,
    number: `${i}`,
    date: `2019/9/${i}`,
    age4: `AACC000${i}`
  });
}

class Query_mediumForm extends Component {

  state = {
    filteredInfo: null,
    sortedInfo: null,
    selectedRowKeys: [],
    loading: false,

    showAddModal: false,
    genseq: '',

    dataSource: data,

    count: 0,
    loading: false,
    pageNum: 1,
    pageSize: 100
  };

  handleChange = (pagination, filters, sorter) => {
    console.log("Various parameters", pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter
    });
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  //导出
  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  checkGenSeq = (current = 1) => {
    this.start();
    
    const url = global.api.strainGenSeq;
    return global.getdata.get(url, {page_index: current, page_size: this.state.pageSize, info_jyxl: this.state.genseq})
    .then(res => {
      this.setState({dataSource: res, count: res.length})
    })
    .catch(err => {
      Modal.error({
        content: '网络异常!',
      });
    }) 
  }

  loadData = (current = 1) => {

    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);

    const url = global.api.strainInfo;
    return global.getdata.get(url, {page_index: current, page_size: this.state.pageSize})
    .then(res => {
      this.setState({dataSource: res.results, count: res.count})
    })
    .catch(err => {
      Modal.error({
        content: '网络异常!',
      });
    }) 

  }

  componentDidMount() {
    this.loadData(1);
  }

  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};

    //表格表头数据
    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        fixed: 'left',
        width:200,
        editable: false,
      },
      {
        title: '新增分离菌株编号',
        dataIndex: 'add_separate_num',
        fixed: 'left',
        width:200,
        editable: true,
      },
      {
        title: '采集样品编号',
        dataIndex: 'Acq_id',
        editable: true,
      },
      {
        title: '采集样品预处理方法',
        dataIndex: 'add_method',
        editable: true,
      },
      {
        title: '菌种类别',
        width: 200,
        dataIndex: 'add_jzlb',
        render: (text, record) => (
          <Select defaultValue={text} style={{width: '100%'}}>
            <Option value="fxj">放线菌</Option>
            <Option value="xj">细菌</Option>
            <Option value="xxzj">真菌（小型真菌）</Option>
            <Option value="jmzj">真菌（酵母）</Option>
            <Option value="dxzj">真菌（大型真菌）</Option>
            <Option value="qt">其他类型</Option>
          </Select>
        )
      },
      {
        title: '属名',
        dataIndex: 'add_sm',  
        editable: true,     
      },
      {
        title: '近缘菌株',
        dataIndex: 'add_jyjz',
        editable: true,
      },
      {
        title: '近缘菌株相似性(%)',
        dataIndex: 'add_flid',
        editable: true,
      },
      {
        title: '菌株图片',
        dataIndex: 'add_pic',
      },
      {
        title: '菌株序列',
        dataIndex: 'info_jyxl',
        editable: true,
      },
      {
        title: 'Blast文件',
        dataIndex: 'info_blastwj',
      },
      {
        title: '基因序列原始文件',
        dataIndex: 'info_jyxlwj',
      },

      {
        title: '其他文件上传',
        dataIndex: 'add_qtjzwjsc',
      },
      {
        title: '分离培养基',
        dataIndex: 'add_flpyjid',
        editable: true,
      },
      {
        title: '传代培养基',
        dataIndex: 'add_cdpyjid',
        editable: true,
      },
      {
        title: '分离人',
        dataIndex: 'add_person',
        editable: true,
      },
      {
        title: '分离时间',
        dataIndex: 'add_time',
        editable: true
      },
      {
        title: '工作人员',
        dataIndex: 'worker',
        editable: true
      },
    ];
    
    return (
      <div>

        <Modal
          title="Basic Modal"
          visible={this.state.showAddModal}
          onOk={()=>this.setState({showAddModal: false})}
          onCancel={()=>this.setState({showAddModal: false})}
        >
          <TextArea onChange={e => this.setState({genseq: e.target.value})} placeholder="输入菌株序列" style={{marginTop:'50px', marginBottom:'24px'}} />
          <Button onClick={() => this.checkGenSeq()} type="primary" style={{ marginLeft: 16 }}>
            确定
          </Button>
        </Modal>

        <Button
          onClick={() => this.setState({showAddModal: true})}
          type="primary"
          style={{marginLeft:20,marginTop:20}}
        >
          菌株序列
        </Button>

        <Table
          // rowSelection={rowSelection}
          bordered={true}
          columns={columns}
          dataSource={this.state.dataSource}
          onChange={this.handleChange}
          // pagination={{ pageSize: 20 }} //设置第一页默认显示的列
          // scroll={{ y: 500 }}
          scroll={{ x: 4000 }}
        />
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class CompoundInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default CompoundInfo;
